<template>
  <div style="margin-top: 30px;" >
    <el-descriptions title="个人公寓水电费列表" :column="2" :size="size" border class="margin-top">
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          公寓楼
        </template>
        {{ ruleForm.buildingName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-school"></i>
          公寓号
        </template>
        {{ ruleForm.dormitoryName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-bell"></i>
          状态
        </template>
        <el-tag :type="getTagType(ruleForm.remainingWaterAmount,ruleForm.remainingElectricityAmount)">
          {{ getTagText(ruleForm.remainingWaterAmount, ruleForm.remainingElectricityAmount) }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-time"></i>
          更新日期
        </template>
        {{ ruleForm.updateDate }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-coin"></i>
          实际水量使用
        </template>
        {{ ruleForm.actualWaterUsage }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-coin"></i>
          实际电量使用
        </template>
        {{ ruleForm.actualElectricityUsage }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-money"></i>
          预付水量
        </template>
        {{ ruleForm.prepaidWaterAmount }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-money"></i>
          预付电量
        </template>
        {{ ruleForm.prepaidElectricityAmount }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-heavy-rain"></i>
          剩余水量
        </template>
        {{ ruleForm.remainingWaterAmount }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-lightning"></i>
          剩余电量
        </template>
        {{ ruleForm.remainingElectricityAmount }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
export default {
  data() {
    return {
      i: 0,
      category: null,
      size: '', // 可根据需要调整大小
      ruleForm: {
        buildingName: '公寓楼名称',
        dormitoryName: '公寓号码',
        status: '正常',
        updateDate: '2024-01-12',
        actualWaterUsage: 0,
        actualElectricityUsage: 0,
        prepaidWaterAmount: 0,
        prepaidElectricityAmount: 0,
        remainingWaterAmount: 0,
        remainingElectricityAmount: 0,
      },
    };
  },
  methods: {
    getTagType(value1, value2) {
      return value1 < 0 || value2 < 0 ? 'danger' : 'success'; // 若剩余水电费为负数，返回'danger'类型，否则返回'success'类型
    },
    getTagText(value1, value2) {
      return value1 < 0 || value2 < 0 ? '欠费' : '正常'; // 若剩余水电费为负数，返回'欠费'文本，否则返回'正常'文本
    },
  },
  created() {
    const currentUserId = this.$store.state.student.id;
    axios.get(`http://localhost:9090/utilities/getInfoByStudentId/${currentUserId}`)
        .then((resp) => {
          this.ruleForm = resp.data.data;
        })
        .catch((error) => {
          console.error('Error fetching data:', error);
        });
  }
}

</script>

<style scoped>
/* 可以添加组件的样式 */
</style>
